<!--
作者：黄涛
时间：2021-02-03
描述：外来用户app注册页 第1页
-->
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<link rel="stylesheet" href="../../../css/mui.min.css">
		<link rel="stylesheet" href="../css/common.css">
		<link rel="stylesheet" href="css/body.css">
		<title>注册</title>
		<style>
			.form-item{border-bottom:1px solid rgba(228, 228, 228, 1);margin:10px 0;
			display: flex;flex-wrap:wrap;}.p-form{padding:2vh 6.5%;}
			.form-item span{font-size: 14px;}
			.form-item span:nth-child(1){width:62px;text-align-last: justify;color:#666;}
			.form-item span:nth-child(2){width:calc(100% - 62px);}
			.form-item input{background:none;border:none;color:rgb(153, 153, 153);
			margin:0;border-radius: 0;}
			.form-item input,.form-item span,.form-item{height:40px;line-height: 40px;}
			.form-item input{font-size: 14px; font-weight: 400; color:#555;height:38px;line-height: 38px;}
			.mui-radio{display: flex;}.mui-radio input[type=radio]{transform: scale(.7);position: relative;right:0;margin-right: 15px;}
			.mui-icon-arrowright{position: relative;}
			.mui-icon-arrowright:before{ position: absolute;right:0;color: #bbb;font-size: 22px;}
			.p-sendcode{position: relative;}.p-qrts{width: 70%;padding:5px 0 0 30%;display: flex; visibility: hidden;
			justify-content: flex-start;}.p-qrts font{width:auto;padding:0 24px;height:20px;line-height: 20px;
			background:rgba(242, 242, 242, 1);text-align: center;}
			.p-qrts font:nth-child(2){}
			.mui-btn-primary{position: absolute;right:0;top:0;}
			.p-qrts font{color: #aaa;font-size: 12px;}.p-qrts font.on{background: orangered;color: #fff;}
			.p-qrts font:nth-child(2).on{background: #F19149;}.yzm-btn{
					transition: none;
					padding: 2px 0;border:1px solid #339AF2;
					height: 24px;width:auto;color: #339AF2;
					border-radius: 15px;text-align: center;
					top: 8px;line-height: 19px;right:0;
					font-size: 12px; position: absolute;
			}
			.p-qrts font:nth-child(1){border-radius: 20px 0 0 20px;}
			.p-qrts font:nth-child(2){}
			.p-qrts font:nth-child(3){border-radius: 0 20px 20px 0;}
			.p-qrts font:nth-child(1).on{}
			.p-qrts font:nth-child(2).on{}
			.p-qrts font:nth-child(3).on{background: #0CBD5F;}
		</style>
	</head>
	<body>
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">注册</h1>
		</header>
		<div class="mui-content" id="page">
			<div class="p-form">
				<div class="form-item">
					<span>姓名</span><span><input v-model="form.compellation" type="text" placeholder="请输入真实姓名"></span>
				</div>
				<div class="form-item">
					<span>性别</span><span class="mui-input-row mui-radio" style="padding-left:27%">
						<font color="#777">男</font><input v-model="form.sex" type="radio" name="sex" value="1">
						<font color="#777">女</font> <input v-model="form.sex" name="sex" type="radio" value="2">
					</span>
				</div>
				<div class="form-item">	
					<span>身份证号</span><span><input v-model="form.idCard" type="text" placeholder="请输入身份证号"></span>
				</div>
				<div class="form-item">
					<span style="width: 120px;">是否有工作单位</span><span class="mui-input-row mui-radio" style="padding-left:10%;width: calc(100% - 120px);">
						<font color="#777">有</font><input v-model="form.hasUnit" @click="clearProject" type="radio" name="hasUnit" value="1">
						<font color="#777">无</font> <input v-model="form.hasUnit" name="hasUnit" @click="clearProject" type="radio" value="0">
					</span>
				</div>
				<div class="form-item" v-if="form.hasUnit==1">	
					<span>所属单位</span><span class="mui-icon mui-icon-arrowright">
					<input v-model="form.enterpriseName" type="text" @click.stop="getEnterprise" readonly placeholder="选择所属公司名称"></span>
				</div>
				<div class="form-item" v-if="form.hasUnit!=1">
					<span>所在区域</span><span class="mui-icon mui-icon-arrowright">
						<input v-model="form.areaName" type="text" @click.stop="getArea" readonly placeholder="请选择所属区域" />
					</span>
				</div>
				<div class="form-item" v-if="form.hasUnit!=1">
					<span>所属场站</span><span class="mui-icon mui-icon-arrowright">
						<input v-model="form.stationName" type="text" @click.stop="getStation" readonly placeholder="请选择所属场站" />
					</span>
				</div>
				<div class="form-item">	
					<span>作业项目</span><span class="mui-icon mui-icon-arrowright">
					<input v-model="form.currentProjectName" type="text" @click.stop="getProject" readonly placeholder="选择或填写项目名称"></span>
				</div>
				<div class="form-item">	
					<span>手机号</span><span><input v-model="form.phone" type="text" placeholder="请输入手机号"></span>
				</div>
				<div class="form-item">	
					<span>验证码</span><span class="p-sendcode"><input placeholder="请输入验证码" type="text" v-model="form.code">
					<button @click="sendCode" type="button" class="mui-btn yzm-btn" style="width: 80px;">{{btnTxt}}</button>
					</span>
				</div>
				<div class="form-item">	
					<span>设置密码</span><span><input v-model="form.password" placeholder="输入密码" v-on:input="checkPwd" type="password"></span>
					<div class="p-qrts"><font class="">弱</font><font class="">中</font><font>强</font></div>
				</div>
				<div class="form-item" style="margin-top:30px">	
					<span>确认密码</span><span><input v-model="form.confirmPwd" placeholder="再次确认输入密码" type="password"></span>
				</div>
				<div class="p-btn" @click="next">下一步</div>
			</div>
			
		</div>
	
	</body>
	<script src="../../../js/mui.min.js"></script>
	<script src="../../../js/mui.picker.js" type="text/javascript" charset="utf-8"></script>
	<script src="../../../js/mui.poppicker.js" type="text/javascript" charset="utf-8"></script>
	<link rel="stylesheet" type="text/css" href="../../../css/mui.picker.css" />
	<link rel="stylesheet" type="text/css" href="../../../css/mui.poppicker.css" />
	<script src="../../../js/jquery-3.2.1.min.js"></script>
	<script src="../js/mkeyplus.base.js"></script>
	<script src="../../../js/common.js"></script>
	<script type="text/javascript" src="../../../js/vue.js"></script>
	<script src="js/md5.js"></script>
	<script src="js/api.js"></script>
	<script>
		mui.init();
		var htapi = new HTGlobal();
		//避免重复绑定
		var selectEnterprise = function(data){
			return htapi.eventSelectEnterprise.call(htapi,data);
		}
		window.removeEventListener('eventSelectEnterprise',selectEnterprise);
		window.addEventListener('eventSelectEnterprise',selectEnterprise);
		var page = new Vue({
			  el: '#page',
			  watch:{
				  'form.currentProject':function(){
					  
				  }
			  },
			  data: {
				form:{
					areaId:'',
					areaName:'',
					stationId:'',
					stationName:'',
				  compellation:'',//姓名
				  idCard:'',//身份证号
				  enterpriseId:'',//单位ID
				  enterpriseName:'',//单位名称
				  currentProject:'',//项目ID
				  currentProjectName:'',//项目名称
				  phone:'',//手机号
				  password:'',//密码
				  confirmPwd:'',
				  sex:1,
				  hasUnit:1,//有无单位 1为有、0为无
				  code:''
				},
				btnTxt:'发送验证码',
				timer:'',
				hasAppUser:true
			  },
			methods: {
				clearProject(){
					/** 切换注册清除之前选择的项目
					 * @method clearProject
					 * @param{空} 
					 * @return {空} 
					*/
					this.form.currentProjectName = ''
					this.form.currentProjectId = ''
				},
				getArea(){
					/** 调用区域列表
					 * @method getArea
					 * @for HTGlobal
					 * @param{form} form当前表单内容
					 * @return {空} 
					*/ 
				   var form = this.form
					htapi.getArea(form,function(){
						form.stationId = ''
						form.stationName = ''
						form.currentProjectName = ''
						form.currentProjectId = ''
					})
				},
				getStation(){
					/** 调用场站列表
					 * @method getStation
					 * @for HTGlobal
					 * @param{form} form当前表单内容
					 * @return {空} 
					*/ 
				   var form = this.form
					htapi.getStation(form,function(){
						form.currentProjectName = ''
						form.currentProjectId = ''
					})
				},
				getEnterprise(){
					htapi.enterpriseSearch(this.form);
					//htapi.getEnterpriseList(this.form)
				},
				setProject(data){
					var D = data.detail || {},Form = this.form
					Form.currentProjectName = D.currentProjectName;
					Form.currentProject = D.currentProjectId;
					Form.currentProjectId = D.currentProjectId;
					Form.enterpriseProjectId = D.enterpriseProjectId;
					console.log(JSON.stringify(data.detail))
				},
				getProject(){
					var that = this
					htapi.getProjectForPage(this.form,'./changeProject',function(){
						window.removeEventListener('changeProject',that.setProject);
						window.addEventListener('changeProject',that.setProject);
					})
					return;
					//旧方法
					htapi.getProjectList(this.form,function(data){
						var btnArray = ['取消', '确认'];
						mui.confirm('所属区域：'+data.areaName+";\n"+'所属场站：'+data.stationName+';', '请核对您所选的信息', btnArray, function(e) {
							if (e.index == 1) {
							   
							}
						})
					})
				},
				checkPwd(){
					//验证密码强度
					var str = this.form.password,num=htapi.checkPwd(str),doms=$('.p-qrts font');
					doms.removeClass('on').parent().css('visibility','initial')
					if(num>0){
						for(var i=0;i<num;i++){doms.eq(i).addClass('on')}
					}
				},
				sendCode(){
					//发送验证码
					htapi.sendMsgCode(this.$data,'verificationCode2');
				},
				next(){
					/** 提交当前页数据
					 * @method next
					 * @return {空} 
					*/ 
					var form = this.form;
					if(form.compellation==''){
					    mui.toast('请输入姓名');
					    return false;
					}
					if(!htapi.checkIdCard(form.idCard)){
						mui.toast('请输入正确的身份证号');
						return false;
					}
					if(form.enterpriseId==''&&form.hasUnit==1){
					    mui.toast('请选择所属单位');
					    return false;
					}
					if(form.areaId==''&&form.hasUnit==0){
						mui.toast('请选择区域');
						return false;
					}
					if(form.stationId==''&&form.hasUnit==0){
						mui.toast('请选择场站');
						return false;
					}
					if(form.currentProjectId==''){
					    mui.toast('请选择所属项目');
					    return false;
					}
					if (!(/^1[3456789]\d{9}$/.test(form.phone))) {
						mui.toast('请输入正确的手机号码');
						return false;
					}
					/* 验证码预留区 p-code */
					/* end p-code */
					if (form.password.trim().length < 12 ) {
					    mui.toast('请设置不小于12位密码');
					    return false;
					}
					if(form.code==''){
						mui.toast('请输入验证码！');
						return false;
					}
					// if(!(/^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[^]{6,18}$/.test(form.password))){
					if(!/(?=.*[A-Z])(?=.*[a-z])(?=.*[0-9])(?=.*[\W_]).{12,}/.test(form.password)){
					    mui.toast('密码必须包含大写字母，小写字母、数字及特殊字符');
					    return false;
					}
					if (form.password != form.confirmPwd) {
					    mui.toast('两次密码输入不一致');
					    return false;
					}
					
					var post_data = JSON.parse(JSON.stringify(form));
					//md5
					post_data.confirmPwd = post_data.password = md5(post_data.password);
					var reqdata = JSON.stringify(post_data);
					console.log(reqdata);
					//验证是否已注册
					htapi.hasAppUser(post_data,function(data){
						console.log(JSON.stringify(data));
						if(data.code=='0'){
							//清空表单
							Object.keys(form).forEach(function(key){
								form[key] = '';
							});
							$('.p-qrts').css('visibility','hidden');
							mui.openWindow({
							  url: './registerWNext.html',
							  id: './registerWNext.html',
							  extras: {
								form: reqdata
							  }
							});	
						}else{
							
							mui.toast(data.msg);
						}
						
					})
					return;
					
				}
			}
		})
	</script>
</html>
